<template>
  <div>
    <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-between search-form">
        <div class="flex-grow-1">

          <el-select clearable class="w150px mr-3" v-model="queryParam.campusId" placeholder="请选择校区" autocomplete="off">
            <el-option v-for="item in campusOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select clearable class="w150px mr-3" v-model="queryParam.buildingId" placeholder="请选择教学楼" autocomplete="off">
            <el-option v-for="item in buildingOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select clearable class="w150px mr-3" v-model="queryParam.roomId" placeholder="请选择教室" autocomplete="off">
            <el-option v-for="item in roomOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>

          <el-select class="w100px mr-3" v-model="queryParam.pullingState" placeholder="直播状态">
            <el-option v-for="item in pullingStateOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <div class="el-select w250px" style="margin-top: 2px;">
            <el-date-picker style="width:220px" v-model="queryParam.time" type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
          </div>
          <el-input class="w350px mr-3" v-model.trim="queryParam.name" autocomplete="off" placeholder="标题/课程/学院/教师/教室">
            <template #prepend>
              <el-select class="w100px" v-model="queryParam.search" placeholder="请选择">
                <el-option label="标题" value="1" />
                <el-option label="课程" value="2" />
                <el-option label="学院" value="3" />
                <el-option label="教师姓名" value="4" />
                <el-option label="教室" value="5" />
              </el-select>
            </template>
          </el-input>
          <el-button type="primary" plain @click="onRefresh(null)">搜索</el-button>

        </div>
        <div class="d-flex">
          <el-button type="primary" @click="onAdd(null)">新建</el-button>
          <el-button type="primary" plain @click="onEditRow(null)">编辑</el-button>
          <el-button type="primary" plain @click="onDeleteMulti(null)">删除直播</el-button>
        </div>
      </div>
    </div>
    <div class="app_card pt-4  pb-5">

      <el-table stripe size="large" :data="dataOfTable" height="calc(100vh - 300px)" @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="50" />
        <el-table-column label="封面" prop="image" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-image preview-teleported="true" style="height: 30px" :src="scope.row.image" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.image]" :initial-index="0" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" align="center" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="直播开始时间" prop="startTime" align="center" width="170">
          <template #default="scope">{{ scope.row.startTime }}</template>
        </el-table-column>
        <el-table-column label="直播结束时间" prop="endTime" align="center" width="170">
          <template #default="scope">{{ scope.row.endTime }}</template>
        </el-table-column>
        <el-table-column label="老师" prop="teacherName" align="center" :minWidth="100" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.teacherName }}</template>
        </el-table-column>
        <el-table-column label="直播类型" prop="taskType" align="center" :minWidth="100" show-overflow-tooltip>
          <template #default="scope">
            <template v-if="scope.row.taskType=='0'">普通直播</template>
            <template v-else-if="scope.row.taskType=='1'">互动直播</template>
          </template>
        </el-table-column>
        <el-table-column label="互动教室" prop="interactRoom" align="center" :minWidth="100" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.interactRoom }}</template>
        </el-table-column>
        <el-table-column label="所属院系" prop="academyName" align="center" :minWidth="100" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.academyName }}</template>
        </el-table-column>
        <el-table-column label="所属专业" prop="majorName" align="center" :minWidth="100" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.majorName }}</template>
        </el-table-column>
        <el-table-column label="所属教室" prop="roomName" align="center" :minWidth="100" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.roomName }}</template>
        </el-table-column>
        <el-table-column label="所属课程" prop="courseName" align="center" :minWidth="100" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.courseName }}</template>
        </el-table-column>
        <el-table-column label="直播状态" prop="taskStatus" align="center" :minWidth="100" show-overflow-tooltip>
          <template #default="scope">
            <!-- 直播状态  taskStatus  当前状态，0、空闲，1、直播中，2、录制中 -->

            <template v-if="scope.row.taskStatus=='0'">待审核</template>
            <template v-else-if="scope.row.taskStatus=='1'">等待开播</template>
            <template v-else-if="scope.row.taskStatus=='2'">直播中</template>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="note" align="center" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.note }}</template>
        </el-table-column>
        <!--

    待审核    审核  更换标题封面
    等待开播   取消直播  预览  更换标题封面
    直播中     停止直播  查看  更换标题封面 -->

        <el-table-column fixed="right" label="操作" width="320">
          <template #default="scope">
            <el-button link type="primary" @click="onTitleImgRow(scope.row)">更换标题封面</el-button>
            <el-button link type="primary" v-if="scope.row.taskStatus=='1'" @click="onDetailRow(scope.row)">预览</el-button>
            <el-button link type="primary" v-if="scope.row.taskStatus=='1'" @click="onCloseRow(scope.row)">取消申请</el-button>
            <el-button link type="primary" v-if="scope.row.taskStatus=='2'" @click="onStopRow(scope.row)">停止直播</el-button>
            <el-button link type="primary" v-if="scope.row.taskStatus=='2'" @click="onDetailRow(scope.row)">查看</el-button>
            <el-button link type="primary" v-if="scope.row.taskStatus=='0'" @click="onApply(scope.row)">审核</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="mt-2">
        <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.pageSize" :page-sizes="paginationOption.pageSizes" :layout="paginationOption.layout" :total="paginationOption.count" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
      </div>
    </div>
    <TitleImgDialog ref="titleImgDialogRef" @success="loadData()"></TitleImgDialog>
    <DetailDialog ref="detailDialogRef" @success="loadData()"></DetailDialog>
    <EditDialog ref="editDialogRef" @success="loadData()"></EditDialog>
    <ApplyDialog ref="applyDialogRef" @success="loadData()"></ApplyDialog>
  </div>
</template>

<script setup>
/**
 * 录播资源管理
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';
import { pullingStateList, releaseStateList } from '@/apis/model/RecordModel';
import { findValue } from '@/utils/EsCommon';
//组件
import EditDialog from './EditDialog.vue';
import DetailDialog from './DetailDialog.vue';
import ApplyDialog from './ApplyDialog.vue';
import TitleImgDialog from './TitleImgDialog.vue';

// ======================================================
//                      变量声明
// ======================================================

const pullingStateOption = ref(pullingStateList);
const releaseStateOption = ref(releaseStateList);
const campusOption = ref([]);
const buildingOption = ref([]);
const roomOption = ref([]);
const authStore = useAuthStore();

// 组件引用
const radioFloor = ref('-1');
const titleImgDialogRef = ref(null);
const editDialogRef = ref(null);
const detailDialogRef = ref(null);
const applyDialogRef = ref(null);

// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryParam = ref({
  pullingState: '',
  search: '',
  name: '',
  time: [],
  group_id: 0,
  page: 1,
  pageSize: 10,
})
// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [10, 20, 50, 100, 500, 1000],
  count: 0,
})
// 表格多选数据
const multipleSelection = ref([]);


// ======================================================
//                      处理事件
// ======================================================
const floorChange = () => {
  if (radioFloor.value == "-2") {
  } else if (radioFloor.value == "-3") {
  } else if (radioFloor.value == "-1") {
  } else {
  }
  onRefresh()
}
// 点击刷新按钮
const onRefresh = () => {
  queryParam.value.page = 1;
  loadData();
}

// 点击新增按钮
const onAdd = (row = null) => {
  editDialogRef.value.show(null, "新建直播");
}

// 处理表格全选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 跟换标题封面
const onTitleImgRow = (row = null) => {
  titleImgDialogRef.value.show(row.id, "更换标题封面", row);
}
// 申请发布
const onApply = (row = null) => {
  applyDialogRef.value.show(row.id, "申请发布", row);
}

// 点击批量删除按钮
const onDeleteMulti = () => {
  let n = multipleSelection.value.length, id = multipleSelection.value.map(v => v.id).toString();
  if (n) {
    ElMessageBox.confirm("确定要删除 " + n + " 条记录吗？", "警告").then(() => {
      EsAjax.delete(ApiUrls.academyDelete, { data: { id } }).then(res => {
        if (res.data.code !== 200) {
          ElMessage.warning(res.data.msg);
          return;
        }
        ElMessage.success("操作成功");
        loadData();
      }).catch(err => {
        ElMessage.error("网络错误：" + err.message);
      })
    }).catch(() => { })
  } else {
    ElMessage.info("请选择批量数据");
  }

}
// 点击行内编辑按钮
const onEditRow = () => {
  let n = multipleSelection.value.length, id = multipleSelection.value.map(v => v.id).toString();
  if (n) {
    let row = multipleSelection.value[0]
    editDialogRef.value.show(row.id, "编辑直播", row);

  } else {
    ElMessage.info("请选择批量数据");
  }
}
// 点击行内编辑按钮
const onDetailRow = (row) => {
  detailDialogRef.value.show(row.id, "详情 ", row);
}

// 批量下架
const onCloseRow = (row) => {
  ElMessageBox.confirm("确认取消申请操作？", "警告").then(() => {
    ElMessage.success("操作成功");
    EsAjax.delete(ApiUrls.iccardDelete, { data: { id: row.id } })
      .then(res => {
        if (res.data.code !== 200) {
          ElMessage.warning(res.data.msg);
          return;
        }
        ElMessage.success("操作成功");
        loadData();
      })
      .catch(err => { ElMessage.error("网络错误：", err.message) });
  }).catch(() => {

  });
}
// 批量下架
const onStopRow = (row) => {
  ElMessageBox.confirm("确认停止直播？", "警告").then(() => {
    ElMessage.success("操作成功");
    EsAjax.delete(ApiUrls.iccardDelete, { data: { id: row.id } })
      .then(res => {
        if (res.data.code !== 200) {
          ElMessage.warning(res.data.msg);
          return;
        }
        ElMessage.success("操作成功");

        loadData();
      })
      .catch(err => { ElMessage.error("网络错误：", err.message) });
  }).catch(() => {

  });
}

// 批量上架
const onRow = (row) => {
  ElMessageBox.confirm("确认批量上架操作？", "警告").then(() => {
    ElMessage.success("操作成功");
    EsAjax.delete(ApiUrls.articleCategoryDelete, { data: { id: row.id } })
      .then(res => {
        if (res.data.code !== 200) {
          ElMessage.warning(res.data.msg);
          return;
        }
        ElMessage.success("操作成功");
        loadData();
      })
      .catch(err => { ElMessage.error("网络错误：", err.message) });
  }).catch(() => { });
  console.log(row)
}


// 处理分页尺寸
const handleChangeSize = (val) => {
  console.log(`${val} items per page`);
  queryParam.value.page = 1;
  queryParam.value.pageSize = val;
  loadData();
}

// 处理页码
const handleChangeCurrent = (val) => {
  console.log(`current page: ${val}`)
  queryParam.value.page = val;
  loadData();
}

// ======================================================
//                      处理事件
// ======================================================

const loadData = () => {
  EsAjax.post(ApiUrls.liveTaskGetAll, queryParam.value).then(res => {
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list, count } = res.data.data
    dataOfTable.value = list;
    paginationOption.value.count = count;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const getBuildingList = () => {
  EsAjax.post(ApiUrls.buildingList, { params: {} }).then(res => {
    console.log(res)

    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    buildingOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const getRoomList = () => {
  EsAjax.post(ApiUrls.roomList, { params: {} }).then(res => {
    console.log(res)

    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    roomOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

const getCampusList = () => {
  EsAjax.post(ApiUrls.campusList, { params: {} }).then(res => {
    console.log(res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    campusOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

onMounted(() => {
  loadData();
  getRoomList();
  getBuildingList();
  getCampusList();
})

</script>
<style lang="less" scoped>
.class_name {
  position: absolute;
  font-size: 20px;
  left: 30px;
  top: 10px;
  font-weight: bold;
}
</style>

